<template>
    <div class="flex h-full">
        <div class="flex-1 pl-3.8rem pt-3.4rem">
            <div class="text-2.8rem">车灯控制</div>
            <div class="text-1.8rem mt-4.8rem">外部车灯</div>
            <Switch :menus="mode" class=" mt-1.9rem" @change="changeLight"></Switch>
            <div class="text-1.8rem mt-4.8rem">显示亮度</div>
            <div class="w-72.3rem h-7.1rem flex items-center rounded-6.3rem">
                <n-slider v-model:value="lightProgress" :step="0.1" :tooltip="false" class="gradient-slider mx-2.8rem"
                    @mousedown="dragStart" @mouseup="dragEnd" @touchstart="dragStart" @touchend="dragEnd">
                    <template #thumb>
                        <SvgIcon class="w-0.1rem h-0.1rem relative" local-icon="music-progress" />
                    </template>
                </n-slider>
            </div>
        </div>
        <div class="flex-1 h-full items-center justify-center pt-30rem pl-0rem">
            <SvgIcon class="w-47rem h-43rem" local-icon="setting-car" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Switch from './switch.vue'
import { eventSetting, SettingAction, SettingSliderEventID, SettingSwitchEventID, SettingWidget } from '@/hooks/business/eventListen/settingEventListen'
import { dragSwipeStartFn, dragSwipeEndFn } from "@/hooks/business/drag";
import { touchEventData } from '@/hooks/business/eventListen/event';

const mode = [
    { "name": "大灯", "key": "headlight" },
    { "name": "雾灯", "key": "foglight" },
    { "name": "自动", "key": "auto" }
];

const lightProgress = ref(50)

function changeLight(val: string) {
    eventSetting(SettingAction.Click, SettingWidget.SettingSwitch, SettingSwitchEventID.LightControl, val)
}

function dragStart(e: TouchEvent) {
    dragSwipeStartFn(e)
}
function dragEnd(e: TouchEvent,) {
    dragSwipeEndFn(e, (data: touchEventData) => {
        if (data.type === 'swipe') {
            data.componentValue = lightProgress.value;
            eventSetting(SettingAction.Swipe, SettingWidget.SettingSlider, SettingSliderEventID.LightSlider, data);
        }
    })
}
</script>
<style lang="scss" scoped>
.gradient-slider {
    :deep(.n-slider-rail) {
        background: rgba(255, 255, 255, 0.1);
        height: 1.9rem;
        border-radius: 6.3rem !important;
        overflow: hidden;
    }

    :deep(.n-slider-rail__fill) {
        background: linear-gradient(90deg, #0532FB 0%, #52E6FB 100%);
        border-radius: 6.3rem !important;
        /* 设置渐变效果 */
    }
}
</style>